<template>
  <div class="home">
    <Top></Top>

    <div class="main">
      <dl v-for="(v, i) in newNavs" :key="i">
        <dt><img :src="v.image" alt="" /></dt>
        <dd>
          <span>{{ v.store_name }}</span>
        </dd>
        <dd>
          <s
            ><span>￥{{ v.ot_price }}</span>
          </s>
        </dd>
        <dd style="color: red; font-size: 20px">
          <span>￥{{ v.price }}</span>
        </dd>
        <dd style="color: #ccc">
          <span>已售{{ v.sales }}件</span>
        </dd>
      </dl>
    </div>
    <!-- 热门推荐数据 -->

    <!-- 判断数据的长度 -->
    <div class="bottom" v-if="length == 0">
      <div class="img">
        <img src="/img/1234.png" alt="" />
      </div>
      <div class="box"><h3>————热门推荐————</h3></div>

      <dl v-for="(v, i) in recommends" :key="i">
        <dt><img :src="v.image" alt="" /></dt>
        <dd>
          <span>{{ v.store_name }}</span>
        </dd>
        <dd style="color: red; font-size: 20px">
          <span>￥{{ v.price }}</span>
        </dd>
        <dd style="color: #ccc">
          <span>已售{{ v.sales }}件</span>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
import { newNavs, recommend } from "@/api/request";
import Top from "@/components/Top.vue";
export default {
  data() {
    return {
      newNavs: [],
      // 热门推荐数据
      recommends: [],
      // 数据的长度
      length: [],
    };
  },
  created() {
    // tab栏数据
    newNavs(this.$route.query.cid).then((res) => {
      // 判断数据的长度
      this.length = res.data.data.length;
      this.newNavs = res.data.data;
    });
    // 热门推荐数据
    recommend().then((res) => {
      this.recommends = res.data.data;
    });
  },
  // 组件
  components: {
    Top,
  },
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  //   padding: 0;
  box-sizing: border-box;
}

.main {
  width: 100%;
  margin-top: 25%;
  dl {
    width: 47%;
    background: white;
    border-radius: 5%;
    margin-top: 3%;
    margin-left: 2%;
    float: left;
    dd {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      span {
        margin-left: 5%;
      }
    }
    img {
      width: 100%;
      height: 200px;
      border-radius: 5% 5% 0px 0px;
    }
  }
}

.bottom {
  width: 100%;
  margin-top: 25%;
  background: white;
  .img {
    width: 100%;
    img {
      width: 100%;
    }
  }
  .box {
    width: 100%;
    text-align: center;
  }
  dl {
    width: 47%;
    background: white;
    border-radius: 5%;
    margin-top: 3%;
    margin-left: 2%;
    float: left;
    dd {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      span {
        margin-left: 5%;
      }
    }
    img {
      width: 100%;
      height: 200px;
      border-radius: 5% 5% 0px 0px;
    }
  }
}
</style>